var app=new Vue({
	el:'#app',
	data:{
		checked: false,
		checkedNames: [],
		checkedArr: ["华为Mate 20", "OPPO R17 Pro", "vivo X23", "一加6T"],
		list:[
			{
				id:1,
				name:'华为Mate 20',
				price:3999,
				count:1
			},
			{
				id:2,
				name:'OPPO R17 Pro',
				price:3999,
				count:2
			},
			{
				id:3,
				name:'vivo X23',
				price:3498,
				count:1
			},
			{
				id:4,
				name:'一加6T',
				price:3889,
				count:3
			}		
		]
	},
	computed:{
		totalPrice:function(){
			var total=0;
			for(var i=0;i<this.list.length;i++){
				var item=this.list[i];
				total+=item.price*item.count;
			}
			return total.toString().replace(/\B(?=(\d{3})+$)/g,',');
		}
	},
	methods:{
		handleReduce:function (index){
			if(this.list[index].count===1){
				return;
			}
			this.list[index].count--;
			console.log(this.list[index].count)
		},
		handleAdd:function (index){
			this.list[index].count++;
			console.log(this.list[index].count)
		},
		handleRemove:function (index){
			this.list.splice(index,1)
		},
		changeAllChecked: function() {
			if (this.checked) {
				this.checkedNames = this.checkedArr
			} else {
				this.checkedNames = []
			}
		}
	},
	watch: {
		"checkedNames": function() {
			if (this.checkedNames.length == this.checkedArr.length) {
				this.checked = true
			} else {
				this.checked = false
			}
		}
	}
});